<!-- 拉新记录 -->
<template>
	<gzPageWrapper
		ref="gzPageWrapperRef"
		:styles="{ background: '#f3f3f3' }"
		:up="{ use: true, auto: false, isLock: true, empty: { use: false } }"
		:down="{ use: true, auto: false }"
		:nav="{ use: false }"
		:scroll="{ top: 0, fixed: true }"
		@upCallback="upCallback"
	>
		<view class="list">
			<view class="item" v-for="item in vdata.list">
				<image class="col img" src="@/static/new/user/default-head.png"></image>
				<view class="col fg">
					<view class="row">
						<view class="name">{{ item.name }}</view>
						<!-- <view class="state">
							<image v-if="item.state == 3 || item.state == 4" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/8c2c9db9-7d9c-4278-81dc-7c84fdcf4cd7.png"></image>
							<image v-else src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/33f71a9c-2b0b-4cce-8fe0-7156424bf567.png"></image>
						</view> -->
					</view>
					<view class="row">
						{{ item.telphone }}
					</view>
				</view>
				<view class="col">
					<button v-if="item.failDetail" plain style="background-color: #afb8c7;">{{ item.failDetail }}</button>
					<button v-else plain @click="toUrl(`/pageUser/myCoupon/viewInfo?couponId=${item.awardId}&fansAwardId=${item.fansAwardId}`)">
						{{ item.state == 3 ? '去激活' : item.state == 0 ? '立即使用' : item.state == 4 ? '已失效' : '查看奖励' }}
					</button>
				</view>
			</view>
			<gzListNull :list="vdata.list"></gzListNull>
		</view>
	</gzPageWrapper>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { $getAciticityAwardItems } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	
	// 页面容器实例
	const gzPageWrapperRef = ref()
	// 数据源
	const vdata = reactive({
		params: {},	// 请求参数
		list: [],	// 拉新记录列表
	})
	
	onLoad(({ inviteParams }) => {
		vdata.params = {
			...JSON.parse(inviteParams),
			activityTemplateNo: 'ACTE017',
			userId: storageManage.userId()
		}
	})
	onMounted(() => {
		gzPageWrapperRef.value.getMescroll().resetUpScroll()
	})
	
	/**
	 * 请求拉新记录
	 */
	const upCallback = (mescroll) => {
		$getAciticityAwardItems(vdata.params).then(({ bizData }) => {
			vdata.list = bizData.map(item => ({...item,...JSON.parse(item.extraJson)}))
			mescroll.endSuccess(0)
		}).catch(() => {
			mescroll.endErr()
		})
	}
	/**
	 * 路由跳转
	 */
	const toUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="less" scoped>
	.list{
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		.item{
			padding: 24rpx;
			background: #fff;
			border-radius: 16rpx;
			display: flex;
			gap: 20rpx;
			.col{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				&.img{
					width: 140rpx;
					height: 140rpx;
				}
				.row{
					display: flex;
					gap: 20rpx;
					align-items: center;
					
					.state{
						image{
							width: 108rpx;
							height: 40rpx;
						}
					}
				}
				&.fg{
					flex-grow: 1;
				}
				button{
					line-height: initial;
					border: none;
					font-size: 26rpx;
					background-color: #75b323;
					color: #fff;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>